<!doctype html>
<html class="no-js">

<head>
    <title>添加食谱</title>
    <#include "/boya/template/meta.html" />
    <link rel="stylesheet" type="text/css" href="/boya/layui/css/layui.css">
</head>

<body>
    <div id="app" class="page">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">菜名</label>
                <div class="layui-input-block">
                    <input type="text" required lay-verify="required" placeholder="请输入菜名" autocomplete="off" class="layui-input" v-model="name">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">食物列表</label>
                <div class="layui-input-block">
                    <ul class="am-list list">
                        <li v-for="(item, index) in list">
                            <span>{{ item.name }} {{ item.weight }}g</span>
                            <div @click="del(index)" class="del-wrap"><i class="am-icon-trash"></i></div>
                        </li>
                    </ul>
                    <div class="input-wrap">
                        <label>食物</label>
                        <select lay-verify="" lay-search lay-filter="material" v-model="materialId">
                            <option value="" disabled=""></option>
                            <option :value="item.attrs.id" v-for="(item, index) in storageSelection" :data-category-id="item.attrs.categoryId">{{ item.attrs.name }}</option>
                        </select>
                        <label>重量</label>
                        <input type="number" lay-verify="" placeholder="请输入重量" autocomplete="off" class="layui-input" v-model="weight">g
                        <a href="javascript:" @click="add" style="color: #0e90d2;"><i class="am-icon-plus-square-o"></i> 确定</a>
                    </div>
                </div>
            </div>
        </form>
        <div style="margin-left: 110px;">
            <button class="am-btn am-btn-primary" @click="submit">提交</button>
        </div>
    </div>
    <#include "/boya/template/script.html" />
    <script type="text/javascript" src="/boya/layui/layui.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                pageIndex: parent.layer.getFrameIndex(window.name),
                storageSelection: [],
                list: [],
                name: '',
                materialId: '',
                materialName: '',
                materialCategoryId: '',
                weight: ''
            }
        },
        mounted: function() {
            var self = this;
            layui.use('form', function() {
                layui.form.on('select(material)', function(data) {
                    self.materialId = data.value;
                    self.materialName = data.elem.selectedOptions[0].text;
                    self.materialCategoryId = $(data.elem.selectedOptions[0]).attr("data-category-id");
                });
            });
            var storageJsonStr = '${storages!}';
            if (storageJsonStr != '') {
                self.storageSelection = JSON.parse(storageJsonStr);
            }
        },
        methods: {
            add() {
                var self = this;
                if (self.materialId == '' || self.weight == '') {
                    return;
                }
                var map = {
                    id: self.materialId,
                    name: self.materialName,
                    categoryId: self.materialCategoryId,
                    weight: self.weight
                }
                self.list.push(map);
                self.materialId = '';
                self.materialName = '';
                self.materialCategoryId = '';
                self.weight = '';
            },
            del(index) {
                var self = this;
                self.list.splice(index, 1);
            },
            submit() {
                var self = this;
                if (self.name == '') {
                    msg("菜名不能为空");
                    return;
                }
                if (self.list.length == 0) {
                    msg("食物列表不能为空");
                    return;
                }
                var map = {
                    name: self.name,
                    list: self.list
                }
                parent.app.list.push(map);
                parent.layer.close(this.pageIndex);
            }
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .list>li {
        position: relative;
        padding: 1rem 0 1rem 1rem;
    }

    .del-wrap {
        position: absolute;
        top: 1rem;
        right: 2rem;
        color: red;
        cursor: pointer;
    }

    .page .input-wrap {
        display: flex;
        line-height: 37px;
    }

    .page .input-wrap>label {
        margin: 0 1rem 1rem 0;
        line-height: 37px;
    }

    .page .input-wrap>input {
        margin: 0 1rem 1rem 0;
        width: 120px;
    }

    .page .input-wrap>a {
        margin: 0 0 1rem 1rem;
        line-height: 37px;
    }

    .layui-form-select .layui-edge {
        top: 40%;
    }

    .layui-form-label {
        width: 90px;
    }

    .submit-wrap {
        padding-left: 30px;
    }
    </style>
</body>

</html>